// store/app.ts
import { theme } from "ant-design-vue";
import variables from "../assets/styles/variables.module.scss";

// 定义 Vuex Store 的状态类型
interface ThemeState {
  themeName: string;
  darkMode: "light" | "dark";
}

// 定义模块的状态
const state: ThemeState = {
  themeName: "blue", // 主题名称
  darkMode: "light", // 颜色模式
};

// 定义 getters
const getters = {
  darkModeComp(state: ThemeState): string {
    console.log("darkModeComp getter called");
    console.log("当前 darkMode: ", state.darkMode); // 仅用于调试输出
    return state.darkMode; // 仅返回状态，不执行副作用
  },
  themeConfig(state: ThemeState) {
    return {
      token: {
        colorPrimary: variables[state.themeName] || "#27ba9b",
        colorSuccess: "#1dc779",
        colorWarning: "#ffb302",
        colorError: "#cf4444",
        colorInfo: variables[state.themeName] || "#27ba9b",
        wireframe: true,
      },
      algorithm:
        state.darkMode === "light"
          ? theme.defaultAlgorithm
          : theme.darkAlgorithm,
    };
  },
  // 新增 getter: getCurrentColorName
  getCurrentColorName(state: ThemeState): string {
    return state.themeName; // 直接返回状态中的主题名称
  },
};

// 定义 mutations
const mutations = {
  setThemeName(state: ThemeState, value: string) {
    state.themeName = value;
    document.documentElement.setAttribute("data-theme", state.themeName);
  },
  // 将 toggleDarkMode 改为接受参数
  toggleDarkMode(state: ThemeState, mode: "light" | "dark") {
    console.log(`改变前的明暗?: ${state.darkMode}`);
    state.darkMode = mode; // 直接根据传入的 mode 设置 darkMode
    document.documentElement.setAttribute("dark", state.darkMode);
    console.log(`改变后的明暗?: ${state.darkMode}`);
  },
};

// 导出作为 Vuex 模块
export default {
  namespaced: true, // 如果需要命名空间，请为此模块命名空间
  state,
  getters,
  mutations,
};
